<template>
    <el-tabs v-model="activeName">
      <el-tab-pane label="红包" name="first">
        <div class="red">
          <ul>
            <li>
            <div class="price">
              <span class="s1">￥</span><span class="s2">15</span>
              <p>满20可用</p>
            </div>
            <div class="name">
              <p class="p1">自付宝共享红包</p>
              <p class="p2">限于手机号1589719231使用</p>
              <p class="p2">回家啊还上贷款</p>
            </div>
            <div class="use">
              <span>限今天</span>
              <router-link tag="p" to="/">去使用</router-link>
            </div>
          </li>
            <li>
              <div class="price">
                <span class="s1">￥</span><span class="s2">15</span>
                <p>满20可用</p>
              </div>
              <div class="name">
                <p class="p1">自付宝共享红包</p>
                <p class="p2">限于手机号1589719231使用</p>
                <p class="p2">回家啊还上贷款</p>
              </div>
              <div class="use">
                <router-link tag="p" to="/">去使用</router-link>
              </div>
            </li>
            <li>
              <div class="price">
                <span class="s1">￥</span><span class="s2">15</span>
                <p>满20可用</p>
              </div>
              <div class="name">
                <p class="p1">自付宝共享红包</p>
                <p class="p2">限于手机号1589719231使用</p>
                <p class="p2">回家啊还上贷款</p>
              </div>
              <div class="use">
                <router-link tag="p" to="/">去使用</router-link>
              </div>
            </li>
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="店铺红包" name="second">
        <div class="red">
          <ul>
            <li v-for="(item, index) of selfRed" :key="index">
              <div class="price">
                <span class="s1">￥</span><span class="s2">{{item.price}}</span>
              </div>
              <div class="name">
                <p class="p1">{{item.name}}</p>
                <p class="p2">{{item.limPrice}}</p>
                <p class="p2">{{item.limNumber}}</p>
              </div>
              <div class="use">
                <p @click="toshoper(item)">进店使用</p>
              </div>
            </li>
            <!--<li>-->
              <!--<div class="price">-->
                <!--<span class="s1">￥</span><span class="s2">3.4</span>-->
              <!--</div>-->
              <!--<div class="name">-->
                <!--<p class="p1">小马哥专享红包</p>-->
                <!--<p class="p2">2019-05-04至2019-05-06</p>-->
                <!--<p class="p2">满16可用</p>-->
                <!--<p class="p2">限收货尾号13131231212</p>-->
              <!--</div>-->
              <!--<div class="use">-->
                <!--<p>进店使用</p>-->
              <!--</div>-->
            <!--</li>-->
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="本地生活" name="third">
        <div style="text-align: center;margin-top: 10px;color: #cccccc">
          卷卷为空~~
        </div>
      </el-tab-pane>
    </el-tabs>

</template>
<script>
  export default {
    data () {
      return {
        activeName: 'second',
        selfRed: [{
          price: '3.4',
          name: '马来一号专享',
          limTime: '2019-05-04至2019-05-06',
          limPrice: '满16可用',
          limNumber: '限收货尾号13131231212',
          img: 'https://fuss10.elemecdn.com/1/6a/857e18385fb9b362056e58266eabbjpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/'
        }, {
          price: '2.8',
          name: '必胜客宅急送（茂南店）',
          limTime: '2019-05-04至2019-06-06',
          limPrice: '',
          limNumber: '限收货尾号13131231212',
          img: 'https://fuss10.elemecdn.com/1/72/3c54d8b5a9b582555bc9e97430acfpng.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/'
        }]
      }
    },
    methods: {
      toshoper (item) {
        this.$router.push({path: '/shoper', query: {name: item.name, url: item.img}})
      }
    }
  }
</script>
<style lang="stylus" type="text/stylus" >
  @import '../../common/stylus/mixin.styl'
  .red
    margin-top :5px
    ul
      list-style:none
      li
        padding :15px 0px 15px 10px
        width :93%
        margin-left :2.5%
        box-shadow :1px 1px 2px #ffe87c
        margin-bottom :5px
        .price
          display :inline-block
          width :25%
          text-align :center
          color :yellow
          padding-top :10px
          .s1
            font-size :10px
            color :#dd6161
            margin-right :5px
          .s2
            font-size :25px
            color :red
          p
            font-size :10px
            color :#cccccc
            margin-top :4px
        .name
          display :inline-block
          width :50%
          .p1
            font-size :14px
            font-weight :bold
            margin-bottom :8px
          .p2
            font-size :10px
            color :#cccccc
            margin-top :3px
        .use
          display :inline-block
          text-align :center

          span
            color :red
            font-size :10px
          p
            top:20px
            padding :8px 12px
            background-color :red
            color :white
            vertical-align :middle
            box-shadow :1px 1px 2px #cccccc
            border-radius :3px
            font-size :10px

  .el-tabs__item
    width :55%
    text-align :center

</style>
